<template>
  <div>
    <el-card class="operator-button-card">
      <template #header>
        <div class="flex justify-between items-center">
          <h2 class="operator-button-label">{{ $t('operator.oa_bind') }}</h2>
          <div>
            <el-button
              v-if="isAuth('10400202.MANAGE')"
              type="primary"
              size="small"
              @click="openOaCustomer"
              >{{ $t('common.set') }}</el-button
            >
          </div>
        </div></template
      >
      <el-form
        ref="customer"
        class="center"
        size="small"
        :model="customer"
        label-width="250px"
      >
        <div v-if="!this.customer">
          <el-empty description="" :image-size="100">
            <el-button
              v-if="isAuth('10400202.MANAGE')"
              type="text"
              @click="openOaCustomer"
              >{{ $t('customer.clickToChoose') }}</el-button
            >
          </el-empty>
        </div>
        <div v-else>
          <el-form-item :label="$t('customer.customerLabel') + ':'">
            {{ customer.customerName }}
          </el-form-item>
          <el-form-item :label="$t('customer.customerShortName') + ':'">
            <span>{{ customer.customerShortName }}</span>
          </el-form-item>
          <el-form-item :label="$t('customer.email') + ':'">
            <span>{{ customer.email }}</span>
          </el-form-item>
          <el-form-item :label="$t('customer.contacts') + ':'">
            <span>{{ customer.contacts }}</span>
          </el-form-item>
          <el-form-item :label="$t('customer.address') + ':'">
            <span>{{ customer.address }}</span>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <oa-customer-list
      v-if="oaCustomerListVisible"
      :operator-id="operatorId"
      :customer-name="customer ? customer.customerName : null"
      ref="oaCustomerList"
      @close="closeOaCustomerList"
    />
  </div>
</template>

<script>
import OaCustomerList from './oa-customer-list'
import { getOperatorOuterBindInfo } from '@/api/operator'
import { isAuth } from '@/utils'

export default {
  components: {
    OaCustomerList
  },
  data() {
    return {
      customer: null,
      operatorId: this.$route.params.operatorId,
      oaCustomerListVisible: false
    }
  },
  created() {
    this.getOaCustomer()
  },
  methods: {
    isAuth,
    openOaCustomer() {
      this.oaCustomerListVisible = true
      this.$nextTick(() => {
        this.$refs.oaCustomerList.init()
      })
    },
    closeOaCustomerList(customer) {
      this.customer = customer
    },
    getOaCustomer() {
      getOperatorOuterBindInfo(this.$route.params.operatorId)
        .then((res) => {
          this.customer = res
          // console.log(this.customer)
        })
        .catch(this.$confirmError)
    }
  }
}
</script>
<style lang="scss" scoped>
.l-card {
  margin: 20px 36px;
}
</style>
